<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>JSP</title>
    <link rel="stylesheet" href="../../css/base.css" />
    <link rel="stylesheet" href="../../css/info-mgt.css" />
	<link rel="stylesheet" href="../../css/info-reg.css" />
	<link rel="stylesheet" href="../../css/WdatePicker.css" />
	<script type="text/javascript" src="../../js/jquery.js"></script>
  </head>
  
  <body>
   	<div class="title"><h2>考勤时间设置</h2></div>
	<div class="table-box">
		<table>
	    	<thead>
	        	<tr>
	            	<th class="num">上午工作时间段</th>
	                <th class="name">下午工作时间段</th>
	                <th class="process">晚上工作时间段</th>
	                <th class="process">所属部门</th>
	                <th class="operate">操作</th>
	            </tr>
	        </thead>
	        <tbody id="planTimeTable">
	        	<!-- 考勤时间表格 -->
	        </tbody>
	    </table>
	</div>
  </body>
  
  <script type="text/javascript">
  	$(function(){
  		//异步获取考勤时间表数据
  		$.ajax({
  		 type:"POST",
  		 url:"checkWorkTimeManager.action",
  		 data:"method=query",
  		 success:function(data){
  		 	var str="";
  		 	for(var i=0;i<data.length;i++){
  		 		str+="<input id='timeId"+i+"' type='hidden' value='"+data[i].timeId+"' />";
  		 		str+="<tr><td width='25%' id='amTime"+i+"' class='num'>"+data[i].amTime+"</td>";
  		 		str+="<td width='25%' id='pmTime"+i+"' class='name'>"+data[i].pmTime+"</td>";
  		 		str+="<td width='25%' id='ntTime"+i+"' class='process'>"+data[i].nightTime+"</td>";
  		 		str+="<td width='13%' id='dpName"+i+"' class='node'>"+data[i].deptName+"</td>";
  		 		str+="<td class='operate'><a id='edit"+i+"' onclick='edit("+i+")' href='javascript:void(0);'>编辑</a></td></tr>";
  		 	}
  		 	$("#planTimeTable").html(str);
  		 }
  		});
  		
  	});
  	
  	var amText="";//上午工作时间段文本
  	var pmText="";//下午工作时间段文本
  	var ntText="";//晚上工作时间段文本
  	//编辑按钮点击事件
	function edit(i){
		//获取上午工作时间段文本值
		amText=$("#amTime"+i).text();
		//上午工作时间段下拉框
		var amStr="";
		amStr+="<select id='am1"+i+"'><option value='07'>07</option><option value='08'>08</option><option value='09'>09</option></select>:";
		amStr+="<select id='am2"+i+"'><option value='00'>00</option><option value=30>30</option></select>-";
		amStr+="<select id='am3"+i+"'><option value=11>11</option><option value=12>12</option></select>:";
		amStr+="<select id='am4"+i+"'><option value='00'>00</option><option value=30>30</option></select>***";
		amStr+="<select id='am5"+i+"'><option value='normal'>正常</option><option value='null'>无</option></select>";
		$("#amTime"+i).html(amStr);
		//更改下拉框的选择
		if(amText!="无"){
			var am1Text=amText.substring(0,amText.indexOf(":"));
			var am2Text=amText.substring(amText.indexOf(":")+1,amText.indexOf("-"));
			var am3Text=amText.substring(amText.indexOf("-")+1,amText.lastIndexOf(":"));
			var am4Text=amText.substring(amText.lastIndexOf(":")+1,amText.length);
			
			$("#am1"+i).find("option[value="+am1Text+"]").attr("selected",true);
			$("#am2"+i).find("option[value="+am2Text+"]").attr("selected",true);
			$("#am3"+i).find("option[value="+am3Text+"]").attr("selected",true);
			$("#am4"+i).find("option[value="+am4Text+"]").attr("selected",true);
		}else{
			$("#am5"+i).find("option[value=null]").attr("selected",true);
		}
		////////////////////////////////////////////////////////////////////////////
		//获取下午工作时间段文本值
		pmText=$("#pmTime"+i).text();
		//下午工作时间段下拉框
		var pmStr="";
		pmStr+="<select id='pm1"+i+"'><option value=13>13</option><option value=14>14</option></select>:";
		pmStr+="<select id='pm2"+i+"'><option value='00'>00</option><option value=30>30</option></select>-";
		pmStr+="<select id='pm3"+i+"'><option value=16>16</option><option value=17>17</option></select>:";
		pmStr+="<select id='pm4"+i+"'><option value='00'>00</option><option value=30>30</option></select>***";
		pmStr+="<select id='pm5"+i+"'><option value='normal'>正常</option><option value='null'>无</option></select>";
		$("#pmTime"+i).html(pmStr);
		//更改下拉框的选择
		if(pmText!="无"){
			var pm1Text=pmText.substring(0,pmText.indexOf(":"));
			var pm2Text=pmText.substring(pmText.indexOf(":")+1,pmText.indexOf("-"));
			var pm3Text=pmText.substring(pmText.indexOf("-")+1,pmText.lastIndexOf(":"));
			var pm4Text=pmText.substring(pmText.lastIndexOf(":")+1,pmText.length);
			
			$("#pm1"+i).find("option[value="+pm1Text+"]").attr("selected",true);
			$("#pm2"+i).find("option[value="+pm2Text+"]").attr("selected",true);
			$("#pm3"+i).find("option[value="+pm3Text+"]").attr("selected",true);
			$("#pm4"+i).find("option[value="+pm4Text+"]").attr("selected",true);
		}else{
			$("#pm5"+i).find("option[value=null]").attr("selected",true);
		}
		////////////////////////////////////////////////////////////////////////////
		//获取晚上工作时间段文本值
		ntText=$("#ntTime"+i).text();
		//晚上工作时间段下拉框
		var ntStr="";
		ntStr+="<select id='nt1"+i+"'><option value=18>18</option><option value=19>19</option></select>:";
		ntStr+="<select id='nt2"+i+"'><option value='00'>00</option><option value=30>30</option></select>-";
		ntStr+="<select id='nt3"+i+"'><option value=20>20</option><option value=21>21</option><option value=22>22</option><option value=23>23</option></select>:";
		ntStr+="<select id='nt4"+i+"'><option value='00'>00</option><option value=30>30</option></select>***";
		ntStr+="<select id='nt5"+i+"'><option value='normal'>正常</option><option value='null'>无</option></select>";
		$("#ntTime"+i).html(ntStr);
		//更改下拉框的选择
		if(ntText!="无"){
			var nt1Text=ntText.substring(0,ntText.indexOf(":"));
			var nt2Text=ntText.substring(ntText.indexOf(":")+1,ntText.indexOf("-"));
			var nt3Text=ntText.substring(ntText.indexOf("-")+1,ntText.lastIndexOf(":"));
			var nt4Text=ntText.substring(ntText.lastIndexOf(":")+1,ntText.length);
			
			$("#nt1"+i).find("option[value="+nt1Text+"]").attr("selected",true);
			$("#nt2"+i).find("option[value="+nt2Text+"]").attr("selected",true);
			$("#nt3"+i).find("option[value="+nt3Text+"]").attr("selected",true);
			$("#nt4"+i).find("option[value="+nt4Text+"]").attr("selected",true);
		}else{
			$("#nt5"+i).find("option[value='null']").attr("selected",true);
		}
		
		//编辑按钮变成取消和保存
		$("#edit"+i).replaceWith("<a id='save"+i+"' onclick='save("+i+")' href='javascript:void(0);'>保存</a>");
		$("#save"+i).after("&nbsp;&nbsp;&nbsp;<a id='cancel"+i+"' onclick='cancel("+i+")' href='javascript:void(0);'>取消</a>");
	}
	
	//取消按钮
	function cancel(i){
		//工作时间段文本还原
		$("#amTime"+i).text(amText);
		$("#pmTime"+i).text(pmText);
		$("#ntTime"+i).text(ntText);
		//编辑按钮替换取消和保存按钮
		$("#save"+i).replaceWith("<a id='edit"+i+"' onclick='edit("+i+")' href='javascript:void(0);'>编辑</a>");
		$("#cancel"+i).remove();
	}
	//保存按钮
	function save(i){
		var amStr="";//上午时间段文本
		var pmStr="";//下午时间段文本
		var ntStr="";//晚上时间段文本
		//获取上午工作时间段值
		if($("#am5"+i).find("option:selected").val()!="null"){
			var am1=$("#am1"+i).find("option:selected").val();
			var am2=$("#am2"+i).find("option:selected").val();
			var am3=$("#am3"+i).find("option:selected").val();
			var am4=$("#am4"+i).find("option:selected").val();
			amStr=am1+":"+am2+"-"+am3+":"+am4;
		}else{
			amStr="无";
		}
		//获取下午工作时间段值
		if($("#pm5"+i).find("option:selected").val()!="null"){
			var pm1=$("#pm1"+i).find("option:selected").val();
			var pm2=$("#pm2"+i).find("option:selected").val();
			var pm3=$("#pm3"+i).find("option:selected").val();
			var pm4=$("#pm4"+i).find("option:selected").val();
			pmStr=pm1+":"+pm2+"-"+pm3+":"+pm4;
		}else{
			pmStr="无";
		}
		//获取晚上工作时间段值
		if($("#nt5"+i).find("option:selected").val()!="null"){
			var nt1=$("#nt1"+i).find("option:selected").val();
			var nt2=$("#nt2"+i).find("option:selected").val();
			var nt3=$("#nt3"+i).find("option:selected").val();
			var nt4=$("#nt4"+i).find("option:selected").val();
			ntStr=nt1+":"+nt2+"-"+nt3+":"+nt4;
		}else{
			ntStr="无";
		}
		var timeId=$("#timeId"+i).val();//获取该列ID
		//异步请求更改数据
		$.ajax({
		 type:"POST",
		 url:"checkWorkTimeManager.action?method=update",
		 data:"id="+timeId+"&amTime="+amStr+"&pmTime="+pmStr+"&ntTime="+ntStr,
		 success:function(data){
		 	alert("修改成功");
		 	//设置考勤时间数据
		 	$("#amTime"+i).text(amStr);
		 	$("#pmTime"+i).text(pmStr);
		 	$("#ntTime"+i).text(ntStr);
		 	//编辑按钮替换取消和保存按钮
			$("#save"+i).replaceWith("<a id='edit"+i+"' onclick='edit("+i+")' href='javascript:void(0);'>编辑</a>");
			$("#cancel"+i).remove();
		 }
		});
	}
	
  </script>
</html>
